<!DOCTYPE html>



  


<html class="theme-next muse use-motion" lang="zh-Hans">
<head><meta name="generator" content="Hexo 3.8.0">
  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css">







<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css">

<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=5.1.4">


  <link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222">





  <meta name="keywords" content="Hexo, NexT">





  <link rel="alternate" href="/atom.xml" title="renhao" type="application/atom+xml">






<meta name="description" content="本文主要讨论react的路由实现依靠history api以及react中的路由方式。">
<meta property="og:type" content="article">
<meta property="og:title" content="React中的BrowserRouter与HashRouter">
<meta property="og:url" content="https://huangrenhao.gitee.io/2019/03/26/react-history/index.html">
<meta property="og:site_name" content="renhao">
<meta property="og:description" content="本文主要讨论react的路由实现依靠history api以及react中的路由方式。">
<meta property="og:locale" content="zh-Hans">
<meta property="og:updated_time" content="2020-09-03T08:50:36.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="React中的BrowserRouter与HashRouter">
<meta name="twitter:description" content="本文主要讨论react的路由实现依靠history api以及react中的路由方式。">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Muse',
    version: '5.1.4',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="https://huangrenhao.gitee.io/2019/03/26/react-history/">





  <title>React中的BrowserRouter与HashRouter | renhao</title>
  








<link rel="stylesheet" href="/css/prism-tomorrow.css" type="text/css"></head>

<body itemscope="" itemtype="http://schema.org/WebPage" lang="zh-Hans">
  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope="" itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">renhao</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle"></p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br>
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br>
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br>
            
            归档
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope="" itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://huangrenhao.gitee.io/2019/03/26/react-history/">

    <span hidden itemprop="author" itemscope="" itemtype="http://schema.org/Person">
      <meta itemprop="name" content="renhao">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/images/avatar.gif">
    </span>

    <span hidden itemprop="publisher" itemscope="" itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="renhao">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">React中的BrowserRouter与HashRouter</h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2019-03-26T18:38:13+08:00">
                2019-03-26
              </time>
            

            

            
          </span>

          
            <span class="post-category">
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope="" itemtype="http://schema.org/Thing">
                  <a href="/categories/React/" itemprop="url" rel="index">
                    <span itemprop="name">React</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/2019/03/26/react-history/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count valine-comment-count" data-xid="/2019/03/26/react-history/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          

          

          
            <div class="post-wordcount">
              
                
                <span class="post-meta-item-icon">
                  <i class="fa fa-file-word-o"></i>
                </span>
                
                  <span class="post-meta-item-text">字数统计&#58;</span>
                
                <span title="字数统计">
                  2.5k
                </span>
              

              
                <span class="post-meta-divider">|</span>
              

              
                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>
                
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                
                <span title="阅读时长">
                  9
                </span>
              
            </div>
          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <p>本文主要讨论react的路由实现依靠history api以及react中的路由方式。<a id="more"></a></p>
<h3 id="HTML5-History-API-和Location对象"><a href="#HTML5-History-API-和Location对象" class="headerlink" title="HTML5 History API 和Location对象"></a>HTML5 History API 和Location对象</h3><h4 id="History-API"><a href="#History-API" class="headerlink" title="History API"></a>History API</h4><p>History作为一个全局变量（window.history)，不继承任何属性，到HTML5拥有的属性和方法：</p>
<ul>
<li><p><strong>History.length</strong> 属性: 返回一个整数，该整数表示会话历史中元素的数目，包括当前加载的页。例如，在一个新的选项卡加载的一个页面中，这个属性返回1。</p>
</li>
<li><p><strong>History.back()</strong> 方法：前往上一页, 用户可点击浏览器左上角的返回按钮模拟此方法。等价于 history.go(-1).</p>
</li>
<li><p><strong>History.forward()</strong> 方法：在浏览器历史记录里前往下一页，用户可点击浏览器左上角的前进按钮模拟此方法。等价于 history.go(1).</p>
</li>
<li><p><strong>History.go()</strong> 方法：通过当前页面的相对位置从浏览器历史记录( 会话记录 )加载页面。比如：参数为-1的时候为上一页，参数为1的时候为下一页. 当整数参数超出界限时，那么这个方法没有任何效果也不会报错。调用没有参数的 go() 方法或者不是整数的参数时也没有效果。</p>
</li>
<li><p><strong>History.pushState(state, title [, url])</strong> 方法：往历史堆栈的顶部添加一个状态。pushState() 带有三个参数：一个状态对象，一个标题（现在被忽略了），以及一个可选的URL地址。state为一个对象或null，它会在触发 window 的 popstate 事件（<code>window.onpopstate</code>）时，作为参数的 state 属性传递过去；如果你向 <code>pushState()</code> 方法传递了一个序列化表示大于640k 的 state 对象，这个方法将扔出一个异常。如果你需要更多的空间，推荐使用 sessionStorage 或者 localStorage 。title 为页面的标题，但当前所有浏览器都忽略这个参数。URL 为页面的 URL ，不写则为当前页；新 URL 必须和当前 URL 在同一个源下；否则，<code>pushState()</code> 将丢出异常。</p>
<blockquote>
<p><strong>popstate </strong>事件：当活动历史记录条目更改时，将触发 popstate 事件。如果被激活的历史记录条目是通过对<code>history.pushState()</code>的调用创建的，或者受到对<code>history.replaceState()</code>的调用的影响，popstate事件的state属性包含历史条目的状态对象的副本。需要注意的是调用<code>history.pushState()</code>或<code>history.replaceState()</code>不会触发 popstate 事件。只有在做出浏览器动作时，才会触发该事件，如用户点击浏览器的回退按钮。</p>
</blockquote>
</li>
<li><p><strong>History.replaceState(state, title [, url])</strong> 方法：更改当前页面的历史记录值。参数同上。这种更改并不会去访问该URL。</p>
</li>
</ul>
<h4 id="Location-对象"><a href="#Location-对象" class="headerlink" title="Location 对象"></a>Location 对象</h4><p>location对象包含当前URL的信息。</p>
<ul>
<li>实例：<code>http://b.a.com:88/index.php?name=kang&amp;when=2011#first</code></li>
</ul>
<table>
<thead>
<tr>
<th style="text-align:center">属性</th>
<th>描述</th>
<th>值</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">hash</td>
<td>设置或返回从井号 (#) 开始的 URL（锚）</td>
<td>‘#first’</td>
</tr>
<tr>
<td style="text-align:center">hostname</td>
<td>设置或返回当前 URL 的主机名</td>
<td>‘b.a.com:88’</td>
</tr>
<tr>
<td style="text-align:center">href</td>
<td>设置或返回完整的 URL</td>
<td>‘<a href="http://b.a.com:88/index.php?name=kang&amp;when=2011#first&#39;" target="_blank" rel="noopener">http://b.a.com:88/index.php?name=kang&amp;when=2011#first&#39;</a></td>
</tr>
<tr>
<td style="text-align:center">pathname</td>
<td>设置或返回当前 URL 的路径部分</td>
<td>‘/index.php’</td>
</tr>
<tr>
<td style="text-align:center">port</td>
<td>设置或返回当前 URL 的端口号</td>
<td>88</td>
</tr>
<tr>
<td style="text-align:center">protocol</td>
<td>设置或返回当前 URL 的协议</td>
<td>‘http’</td>
</tr>
<tr>
<td style="text-align:center">search</td>
<td>设置或返回从问号 (?) 开始的 URL（查询部分）</td>
<td>?name=kang&amp;when=2011’</td>
</tr>
</tbody>
</table>
<ul>
<li>assign()方法：加载新的文档</li>
<li>reload()方法： 重新加载当前文档</li>
<li>replace()方法： 用新的文档替换当前文档</li>
</ul>
<p>window.location 和 document.location 这里指向的都是相同的对象。</p>
<blockquote>
<p>window 与 document</p>
<p>DOM (文档对象模型)是为了操作文档出现的 API，document 是其的一个对象</p>
<p>BOM (浏览器对象模型)是为了操作浏览器出现的 API，window 是其的一个对象</p>
</blockquote>
<h3 id="React-Router-依赖的-history"><a href="#React-Router-依赖的-history" class="headerlink" title="React Router 依赖的 history"></a>React Router 依赖的 history</h3><p>React Router建立在history之上，<a href="https://github.com/ReactTraining/history" target="_blank" rel="noopener">history</a>是为React Router提供核心功能的包，可以在客户端为项目添加基于location的导航，这对于单页应用至关重要。</p>
<p>存在三种history，分别为browser、hash、memory，history包为每种history都提供了创建方法，使用React Router时React Router API中有两种：BrowserRouter和HashRouter，会自动创建history对象，不需要再与history进行直接的交互，但是仍有必要理解不同类型的history。无论创建哪种history，最后都会得到一个几乎相同属性和方法的对象。最后得到的history对象包括的属性和方法有：</p>
<ul>
<li><p>location，反映当前应用所在的“位置”，包含</p>
<ul>
<li><p><code>pathname</code>,<code>search</code>,<code>hash</code>这种由URL派生出的属性；</p>
<blockquote>
<p><code>search</code>是一个字符串而非被解析对象。由于大多数字符串解析包在使用上各不相同。所以history把选择权留给了开发者而不是强制使用某种字符串解析包。</p>
</blockquote>
</li>
<li><p>还包括与之关联并独一无二的<code>key</code>，用于特定location的识别，便于向特定的location存储数据，在 createBrowserHistory 中是一段基为 36 的随机数字符串；</p>
</li>
<li><p>拥有与之相关的状态<code>state</code>，这是一些固定的数据，并且不存在于URL中。</p>
</li>
</ul>
<p>当创建一个history对象之后需要初始化location。对于不同类型的history这一过程也不相同。</p>
</li>
<li><p>一个索引值，用于指向当前所对应的location。虽然我们只能访问当前location，但history对象持续跟踪着一组location，并且history可以添加location并能够访问数组中任意location。</p>
<p>对于memory history它们直接被定义，而对于browser history和hash history，数组和索引被浏览器控制，不能直接访问。（这里是出于安全性的限制，如果开放浏览会泄露使用者的浏览器历史信息）</p>
</li>
<li><p>navigation，允许改变当前的location。</p>
<ul>
<li>push方法，使你能跳转到新的location。通过在当前location后添加新的location时，任意的’未来’location会被清除（之前由后退按钮而形成的在当前location后的location）。</li>
<li>replace方法，并非添加location，而是替换当前索引上的位置。’未来’location将不会被清除。重定向时要使用<code>replace</code>。这也是React Router的<redirect>组件中使用的方法。</redirect></li>
<li>goBack()，返回一层页面，实际上是将history的索引值减1</li>
<li>goForward()，向前一层页面，这仅在拥有‘未来’location生效，即当用户点击了后退按钮。</li>
<li>go()，包含了goForward与goBack的功能。传入负数则退后，传入正数则向前。</li>
</ul>
</li>
<li><p>监听：采用观察者模式，在location改变时，history会发出通知。每一个history对象都有listen方法，接受一个函数作为参数。这个函数会被添加到history储存的监听函数数组中。当location变化时（如代码调用history方法或用户点击浏览器按钮），history对象将会调用所有listener方法。这能让你在location变化时来设置代码更新。</p>
<p>React Router的<code>router</code>组件将会订阅history对象，这样当location变化时，其能重新渲染。</p>
</li>
<li><p>createHref()，每一类history都有这个方法，使用location对象，输出URL。内部，history通过location对象进行导航。然而像锚点元素(a)，它并不知道<code>history</code>这个包，也不知道location对象是什么。为了能让生成的<code>HTML</code>在不需要history的情况下，依旧能够导航。我们必须生成真的URL。</p>
</li>
</ul>
<p>方法属性未完全包括，具体可以参考<a href="https://github.com/ReactTraining/history" target="_blank" rel="noopener">源码</a>。</p>
<p>在浏览器中，browser history 与 hash history 都被用于浏览器环境，它们与history和location的web API（就是HTML5中的History API和Location对象）进行交互，因此当前location与浏览器地址栏中展示的相同。它们两者最大的区别在于从URL创建location的方式，browser history使用完整的URL，而hash history只使用第一个hash后的那部分URL。</p>
<h4 id="browser-history"><a href="#browser-history" class="headerlink" title="browser history"></a>browser history</h4><p>browserHistory 是使用 React-Router 的应用推荐的 history方案。它使用浏览器中的 History API 用于处理 URL，创建一个像example.com/list/123这样真实的 URL 。在browserHistory 模式下，URL 是指向真实 URL 的资源路径，当通过真实 URL 访问网站的时候，由于路径是指向服务器的真实路径，但该路径下并没有相关资源，所以用户访问的资源不存在，当然可以配置服务器然后返回另外的HTML。</p>
<h4 id="为何需要hash-history？"><a href="#为何需要hash-history？" class="headerlink" title="为何需要hash history？"></a>为何需要hash history？</h4><p>理论上来说当你导航到一个URL时，服务端必有一个相应文件与之对应。对于动态服务，请求文件并不需要真实存在。相反，服务端会检查请求的URL并决定返回的HTML。然而，静态文件服务可以直接返回存在磁盘中的文件。静态服务能做的最动态的事就是当URL指定目录时，从目录中返回<code>index.html</code>文件。由于静态文件服务的这种限制，最简单的解决方案就是在服务端仅使用一个真实的location来返回用户端的获取需求。当然，仅有一个location意味着你的应用只有一个URL，这样就无法使用history。为了解决这一问题，hash history使用URL的哈希部分来读写location。</p>
<h4 id="memory：缓存所有history"><a href="#memory：缓存所有history" class="headerlink" title="memory：缓存所有history"></a>memory：缓存所有history</h4><p>Memory history 不会在地址栏被操作或读取。这就解释了我们是如何实现服务器渲染的。同时它也非常适合测试和其他的渲染环境（像 React Native ）。和另外两种history的一点不同是你必须创建它，这种方式便于测试。</p>
<p>使用memory location可以在能使用JavaScript的地方随意使用。一个简单的例子你可以通过运行Node在单元测试中使用它。这允许你能在不依赖浏览器运行的情况下测试代码。memory history可以被使用在app中。在<code>react-native</code>app中<code>react-router-native</code>使用memory history来实现基于location的导航。memory history与其他两类history最大的区别在于其维护着自己的location。当创建memory history后你可以传入信息进行初始化状态。这个状态是一个location数组与当前location的索引。这与其他两类history是不同的，它们依赖浏览器来存储这个location数组。</p>

      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2019/03/08/css-box-model/" rel="next" title="css盒模型">
                <i class="fa fa-chevron-left"></i> css盒模型
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2019/04/01/js-throttle/" rel="prev" title="函数节流与函数防抖">
                函数节流与函数防抖 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          

  
    <div class="comments" id="comments">
    </div>
  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope="" itemtype="http://schema.org/Person">
            
              <p class="site-author-name" itemprop="name">renhao</p>
              <p class="site-description motion-element" itemprop="description"></p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/archives/">
              
                  <span class="site-state-item-count">94</span>
                  <span class="site-state-item-name">日志</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-categories">
                <a href="/categories/index.html">
                  <span class="site-state-item-count">19</span>
                  <span class="site-state-item-name">分类</span>
                </a>
              </div>
            

            

          </nav>

          
            <div class="feed-link motion-element">
              <a href="/atom.xml" rel="alternate">
                <i class="fa fa-rss"></i>
                RSS
              </a>
            </div>
          

          

          
          

          
          

          

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-3"><a class="nav-link" href="#HTML5-History-API-和Location对象"><span class="nav-number">1.</span> <span class="nav-text">HTML5 History API 和Location对象</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#History-API"><span class="nav-number">1.1.</span> <span class="nav-text">History API</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Location-对象"><span class="nav-number">1.2.</span> <span class="nav-text">Location 对象</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#React-Router-依赖的-history"><span class="nav-number">2.</span> <span class="nav-text">React Router 依赖的 history</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#browser-history"><span class="nav-number">2.1.</span> <span class="nav-text">browser history</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#为何需要hash-history？"><span class="nav-number">2.2.</span> <span class="nav-text">为何需要hash history？</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#memory：缓存所有history"><span class="nav-number">2.3.</span> <span class="nav-text">memory：缓存所有history</span></a></li></ol></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">renhao</span>

  
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-area-chart"></i>
    </span>
    
      <span class="post-meta-item-text">Site words total count&#58;</span>
    
    <span title="Site words total count">265.9k</span>
  
</div>


  <div class="powered-by">由 <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a> 强力驱动</div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">主题 &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Muse</a> v5.1.4</div>




        







        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  
    <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script>



  
  

  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.4"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.4"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script>



  


  




	





  





  










  <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
  <script src="//unpkg.com/valine/dist/Valine.min.js"></script>
  
  <script type="text/javascript">
    var GUEST = ['nick','mail','link'];
    var guest = 'nick,mail,link';
    guest = guest.split(',').filter(item=>{
      return GUEST.indexOf(item)>-1;
    });
    new Valine({
        el: '#comments' ,
        verify: false,
        notify: false,
        appId: '2P1xqUWiCoNm14MH4yhURlJi-gzGzoHsz',
        appKey: 'uJN0uagHIVgXtBO1OuLV9Ban',
        placeholder: 'Just go go',
        avatar:'mm',
        guest_info:guest,
        pageSize:'10' || 10,
    });
  </script>



  





  

  

  

  
  

  

  

  

</body>
</html>
